<template>
	<view class="fb-add">
		<view class="top-bg"></view>
		<view class="pl-3 pr-3 fb-add-wrap">
			<u--textarea v-model="Comments" placeholder="请详细描述您的问题,我们会不断完善哦!" height="100" count maxlength="150"
				border="none" confirmType="done"></u--textarea>
			<view class="mt-3 mb-5 p-2 img-upload">
				<view class="flex justify-between mb-3">
					<view class="title">图片上传</view>
					<view class="label">({{Imgs.length}}/5)</view>
				</view>
				<u-upload :fileList="imageList" @afterRead="afterRead" @delete="deletePic" name="file" multiple
					:maxCount="5"></u-upload>
			</view>
			<u-button @click="handleAdd" color="#007aff" shape="circle" text="保存"></u-button>

		</view>
	</view>
</template>

<script>	
	import {
		addFeelback
	} from "@/apis/user.js";
	import {
		uploadFile
	} from "@/apis/common.js";
	export default {
		data() {
			return {
				Comments: '',
				Imgs: [],
				imageList: [],
			};
		},
		onLoad(){
			const pages = getCurrentPages()
			console.log('pages----------', pages, this.$router)
		},
		methods: {
			async handleAdd() {
				const Comments = this.Comments
				if(Comments.length == 0){
					uni.showToast({
						title: '请输入反馈内容',
						icon: "none",
						mask: true,
						position: "center",
					});
					return
				}
				const res = await addFeelback({
					Comments,
					Imgs: JSON.stringify(this.Imgs),
				})
				if (res.MsgCode != 0) return
				console.log('handleAdd', res)
				uni.showToast({
					title: '反馈成功',
					icon: "none",
					mask: true,
					position: "center",
				});
				setTimeout(()=>{
					this.$navigateBack(this.$router,1)
				},1000)
			},
			async afterRead(event) {
				console.log('afterRead', event, this.imageList)
				this.imageList = [...this.imageList, ...event.file]
				event.file.map(async item => {
					await this.uploadImg(item.url)
				})
			},
			async uploadImg(imgUrl) {
				const accountInfo = uni.getStorageSync('accountInfo') || {}
				const data = {
					name: 'file',
					formData: {},
					fileUrl: imgUrl
				}
				const res = await uploadFile({
					CmpyCode: accountInfo.currCmpy ? accountInfo.currCmpy.CmpyCode : ''
				}, data)
				console.log('uploadImg', res)
				if (res.MsgCode != 0) return
				this.Imgs.push(res.FileName)
			},
			deletePic(event) {
				this.imageList.splice(event.index, 1)
				this.Imgs.splice(event.index, 1)
				console.log('deletePic', this.imageList, this.Imgs)
			},
		}
	}
</script>

<style lang="scss">
	.fb-add {
		.top-bg {
			width: 100%;
			height: 120rpx;
			background-color: #007aff;
			z-index: -1;
		}

		.fb-add-wrap {
			margin-top: -72rpx;

			::v-deep .u-textarea {
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;
				padding: 20rpx;
			}

			.img-upload {
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;
				font-size: 28rpx;
				color: #333;

				.title {
					font-weight: bold;
				}

			}
		}
	}
</style>
